<!--content  start-->

<div class="row contentBox" id="indexingContentBox">
    <app-sidebar-task></app-sidebar-task>
  <div class="row containerBoxPI" [ngClass]="{'indexingContent':isActive, 'indexingContentOff':!isActive }">
    
    <ng-container *ngIf="taskType == 1">
      <div class="col-lg-8 col-md-8 productLeft" style="height:100%;">
        <div class="row PI-left-title">
          <div class="col-md-8 col-sm-8 PI-left-title-left">
            <p class="content-title-max-w" title="{{ internalInfo.name }}">{{ internalInfo.name }}</p>
          </div>
          <div class="col-md-4 col-sm-4 PI-left-title-right">
            <p data-toggle="modal" style="display: none;" data-target="#ProductInformation"><img src="assets/indexing/details01.png" /><span>产品信息</span></p>
            <a href="javascript:void(0);" (click)="_refereceIndexingTaskPrevious()" class="PI-left-title-a01"><img src="assets/indexing/upIcon.png" /><span>上一篇</span></a>
            <a href="javascript:void(0);" (click)="_refereceIndexingTaskNext()" class="PI-left-title-a02"><span>下一篇</span><img src="assets/indexing/lastIcon.png" /></a>
          </div>
          <div class="pi-hr"></div>
        </div>
        <!-- style="height: calc(100% - 67px);" -->
        <div class="row" id="internalIndexingContent" style="height: calc(100% - 35px);">
          <div (mousemove)="_setmousemove(event)" id="internalContents" tabindex="0" hidefocus="true"  (mouseup)="rightMouseUp();" class="col-md-12 col-sm-12 PI-left-center" [innerHTML]="internalContent|safeStr" style="height:calc(100% - 40px);overflow-y: scroll;">
          </div>
          <!-- <div class="pi-hr"></div> -->
          <!-- 分页 BEGIN -->
          <!-- <app-pagination [getTotalItems]="contentTotal" [pageSize]="pageSize" [showLeft]="false" (isLoadTableFromPagination)="_internalPagination($event)"></app-pagination> -->
          <!-- 分页 END -->
        </div>
      </div>
    </ng-container>

    <ng-container *ngIf="taskType == 0">
      <div class="col-lg-8 col-md-8 productLeft">
        <div class="row PI-left-title">
          <div class="col-md-8 col-sm-8 PI-left-title-left">
            <p class="content-title-max-w" title="{{ internalInfo.name }}">{{ internalInfo.name }}</p>
          </div>
          <div class="col-md-4 col-sm-4 PI-left-title-right">
            <p data-toggle="modal" style="display: none;" data-target="#ProductInformation"><img src="assets/indexing/details01.png" /><span>产品信息</span></p>
            <a href="javascript:void(0);" (click)="_refereceIndexingTaskPrevious()" class="PI-left-title-a01"><img src="assets/indexing/upIcon.png" /><span>上一篇</span></a>
            <a href="javascript:void(0);" (click)="_refereceIndexingTaskNext()" class="PI-left-title-a02"><span>下一篇</span><img
                src="assets/indexing/lastIcon.png" /></a>
          </div>
          <div class="pi-hr"></div>
        </div>
        <div class="row" style="height: calc(100% - 67px);">
          <div class="col-md-12 col-sm-12 PI-left-center left-internal-content">
            <iframe *ngIf="fileFormat != 'mp3' && fileFormat != 'mp4'" frameborder="0" width="100%" height="100%"></iframe>
            <video id="video-model" *ngIf="fileFormat == 'mp4'" autostart="true" src="http://static.61read.com/videos/2018/BaoBiChiHuLi.mp4" width="100%" controls preload></video>
            <audio id="audio-model" *ngIf="fileFormat == 'mp3'" autostart="true" src="http://static.61read.com/videos/2018/BaoBiChiHuLi.mp4" style="width:100%;"  controls preload="load"></audio>
          </div>
        </div>
      </div>
    </ng-container>


    <ng-container *ngIf="taskType == 2">
      <div class="col-lg-8 col-md-8 productLeft">
        <div class="row PI-left-title">
          <div class="col-md-8 col-sm-8 PI-left-title-left">
            <p class="content-title-max-w" title="{{ internalInfo.name }}">{{internalInfo.name}}</p>
          </div>
          <div class="col-md-4 col-sm-4 PI-left-title-right">
            <p data-toggle="modal" style="display: none;" data-target="#ProductInformation"><img src="assets/indexing/details01.png" /><span>产品信息</span></p>
            <a href="javascript:void(0);" (click)="_refereceIndexingTaskPrevious()" class="PI-left-title-a01"><img src="assets/indexing/upIcon.png" /><span>上一篇</span></a>
            <a href="javascript:void(0);" (click)="_refereceIndexingTaskNext()" class="PI-left-title-a02"><span>下一篇</span><img
                    src="assets/indexing/lastIcon.png" /></a>
          </div>
          <div class="pi-hr"></div>
        </div>
        <div class="row" style="height: calc(100% - 67px);">
          <div class="col-md-12 col-sm-12 PI-left-center left-internal-content">
            <app-left-keyword #leftKeyword [internalParam]='internalTablesParam'></app-left-keyword>
          </div>
        </div>
      </div>
    </ng-container>

    <div class="col-lg-4 col-md-4 productRight">

      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 PI-right-title">
          <ng-container *ngIf="taskType == 0">
          <h5>产品标引</h5>
          </ng-container>
          <ng-container *ngIf="taskType == 1">
            <h5>内文标引</h5>
          </ng-container>
          <ng-container *ngIf="taskType == 2">
            <h5>主题词标引</h5>
          </ng-container>
          <div class="PI-right-title-txt">
            <label>标引状态：</label>
            <select class="form-control select-style" #status="ngModel" name="statusData" disabled [(ngModel)]="statusData">
              <option value="1">已完成</option>
              <option value="0">暂存</option>
            </select>
            <label>审核状态：</label>
            <select class="form-control select-style" #checkStatus="ngModel" name="checkStatusData" disabled
              [(ngModel)]="checkStatusData">
              <option value="0">未审核</option>
              <option value="200">已通过</option>
              <option value="-1">未通过</option>
            </select>

          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 txtTabBoxPI">
          <ng-container *ngIf="TaskThemeTableList">
            <div class="leftShift" (click)="_leftShift()">
              <!--《-->
              <img src="assets/indexing/upIcon.png" />
            </div>
          </ng-container>
          <div class="myTxtTabPIDiv">
            <ul id="myTxtTab" class="nav nav-pills myTxtTabPI">
              <ng-container *ngFor="let themeTaskTables of TaskThemeTableList;let isFirst=first;let i = index;">
                <!--<li class="li_bordet_right" *ngIf="themeTaskTables['canshow'] == 1">-->
                  <!--<a [ngClass]="{'active show': themeTaskTables.active}" href="javascript:void(0);" (click)="changeThemeTable(themeTaskTables.themeTableId,themeTaskTables.themeTableName,themeTaskTables.themeGroupId);"-->
                     <!--data-toggle="tab" style="padding: 0 15px 0 15px;"> {{ themeTaskTables.themeTableName | cuttingStr:4}}</a>-->
                <!--</li>-->
                
                <li class="li_bordet_right">
                  <a [ngClass]="{'active show': themeTaskTables.active}" href="#tab1" (click)="changeThemeTable(themeTaskTables.themeTableId,themeTaskTables.themeTableName,themeTaskTables.themeGroupId);"
                     data-toggle="tab" style="padding: 0 15px 0 15px;" title="{{themeTaskTables.themeTableName}}"> {{ themeTaskTables.themeTableName | cuttingStr:4}}</a>
                </li>
              </ng-container>

              <li class="li_bordet_right" id="tab_attribute">
                <a [ngClass]="{'active show': Attr == true}" href="#tab3" (click)="_changAttribute();attr.getAttrList()" data-toggle="tab" style="padding: 0 15px 0 15px;" title="属性">属性</a>
              </li>

              <li class="li_bordet_right" id="tab_time_attribute" *ngIf="taskType == 1">
                <a [ngClass]="{'active show': timeAttr == true}" href="#tab2" (click)="timeAttr.getAttributeData(internalInfo.productId);_changTimeAttribute()" data-toggle="tab" style="padding: 0 15px 0 15px;" title="时间属性">时间属性</a>
              </li>
            </ul>
          </div>

          <ng-container *ngIf="TaskThemeTableList">
            <div class="rightShift" (click)="_rightShift()">
              <!--》-->
              <img src="assets/indexing/lastIcon.png" />
            </div>
          </ng-container>

          <div id="myTabContent" class="">
            <div id="tab1" class="tab-pane">
              <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 tab1-title-btn">
                  <button class="btn btn-info01 btn-blue" data-toggle="modal" data-target="#ReferenceIndexing" *ngIf="right['indexingTaskList']['IRIndex']" (click)="appReference._getTaskReferenceContentList();">参考标引</button>
                  <button class="btn btn-info01 btn-blue" data-toggle="modal" data-target="#historicalIndexing" *ngIf="right['indexingTaskList']['HRIndex']" (click)="viewVersionTable();">历史标引</button>
                  <!--<button class="btn btn-info01 btn-blue" data-toggle="modal" data-target="#addVersion" *ngIf="right['indexingTaskList']['newVersion']">新增版本</button>-->
                  <button class="btn btn-info01 btn-blue" data-toggle="modal" data-target="#viewKeywordWin" *ngIf="right['indexingTaskList']['InnertextViewTheme']" (click)="appView._infoScroll();appView._infoSearch();appView._clickButton();">查看主题词</button>
                  <button class="btn btn-info01 btn-blue" data-toggle="modal" data-target="#addKeywordWin" *ngIf="right['indexingTaskList']['newTheme']" (click)="appAdd._infoScroll();appAdd._keywordTree()">新增主题词</button>
                </div>
                <div class="pi-hr"></div>
              </div>
              <div class="row tab1-center">
                <div class="col-lg-12 col-md-12 col-sm-12 tab1-title-input" *ngIf="right['indexingTaskList']['query']">
                  <label>标引主题词</label>
                  <app-internal-autocomplate [internalParam]='internalTablesParam' (inputComplete)="findThemeContent($event)"></app-internal-autocomplate>
                  <button class="btn btn-search btn-blue">查询</button>
                </div>
                <div class="pi-hr"></div>
              </div>
              <app-internal-indexed-table #table [internalParam]='internalTablesParam'></app-internal-indexed-table>
              <div class="row tab1-center">
                <div class="col-lg-12 col-md-12 col-sm-12 tab1-foot">
                  <ng-container *ngIf="taskType == 1">
                    <button class="btn btn-info01 btn-blue" data-toggle="modal" data-target="#automaticMatchingModel"
                      (click)="appAM._getInexingAutoList()"
                      *ngIf="right['indexingTaskList']['automaticMatching'] && completeStatus != '1' && checkStatusData != 200"
                      mat-button>自动匹配</button>
                  </ng-container>
  
                  <!-- 只有任务审核人才有审核按钮 -->
                  <button class="btn btn-info01 btn-blue" *ngIf="right['indexingTaskList']['Review'] && completeStatus != '1' && isTaskCheckBy" 
                  data-toggle="modal" data-target="#indexingAuditModel" mat-button>审核</button>
  
                  <!-- 只有任务标引人才有标引按钮 -->
                  <button class="btn btn-info01 btn-blue" data-toggle="modal" data-target="#updateTaskProduct"
                  *ngIf="right['indexingTaskList']['InnertextIndexingSubmit'] && completeStatus != '1' && checkStatusData != 200 && isTaskAssignBy"
                    mat-button>标引完成提交</button>
                </div>
              </div>
            </div>
            <div id="tab3" class="tab-pane">
              <app-indexing-attribute #attr [internalParam]='internalTablesParam'></app-indexing-attribute>
            </div>
            <div id="tab2" class="tab-pane">
              <app-time-attribute #timeAttr [internalParam]='internalTablesParam'></app-time-attribute>
            </div>

            <!-- <div class="row tab1-center">
              <div class="col-lg-12 col-md-12 col-sm-12 tab1-foot" [ngClass]="{'foot_border_top': Attr == true}">
                <ng-container *ngIf="taskType == 1">
                  <button class="btn btn-info01 btn-blue" data-toggle="modal" data-target="#automaticMatchingModel"
                    (click)="appAM._getInexingAutoList()"
                    *ngIf="right['indexingTaskList']['automaticMatching'] && completeStatus != '1' && checkStatusData != 200"
                    mat-button>自动匹配</button>
                </ng-container>
                <button class="btn btn-info01 btn-blue" *ngIf="right['indexingTaskList']['Review'] && completeStatus != '1' && isTaskCheckBy" 
                data-toggle="modal" data-target="#indexingAuditModel" mat-button>审核</button>
                <button class="btn btn-info01 btn-blue" data-toggle="modal" data-target="#updateTaskProduct"
                *ngIf="right['indexingTaskList']['InnertextIndexingSubmit'] && completeStatus != '1' && checkStatusData != 200 && isTaskAssignBy"
                  mat-button>标引完成提交</button>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>

  </div>

</div>
<!--content  end-->

<!--产品信息   弹窗-->
<div class="modal fade addKeyWordWin" id="ProductInformation">
  <div class="modal-dialog modal-lg modal-dialog-centered" style="width: 1000px;">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">产品信息</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- 模态框主体 -->
      <div class="modal-body">
        <div class="PI-keyWordBox PI-keyWordBox01">
          <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 txtTabBoxPI01">
              <ul id="myTxtWinTab" class="nav nav-pills myTxtTabPI">
                <li class="li_bordet_right">
                  <a href="#Wintab1" data-toggle="tab">作者</a>
                </li>
                <li class="li_bordet_right li_bordet_left">
                  <a href="#Wintab2" data-toggle="tab">出版社</a>
                </li>
                <li class="li_bordet_right li_bordet_left">
                  <a href="#Wintab3" data-toggle="tab">更多远数据</a>
                </li>
              </ul>
              <div id="myWinTabContent" class="tab-content myWinTabContent">
                <div id="Wintab1" class="tab-pane fade">
                  <div class="row Wintab1-txt">
                    <p>
                      鸿渐想叫辆汽车上轮船码头。精明干练的鹏图说，汽车价钱新近长了好几倍，鸿渐行李简单，又不勿忙，不如叫两辆洋车，反正有凤仪相送。二十二日下午近五点，兄弟俩出门，车拉到法租界边上，有一个法国巡捕领了两个安南巡捕在搜检行人，只有汽车容易通过。鸿渐一瞧那法国巡捕，就是去年跟自己同船来上海的，在船上讲过几次话，他也似乎还认识鸿渐，一挥手，放鸿渐车子过去。鸿渐想同船那批法国警察，都是乡下人初出门，没一个不寒窘可怜。曾几何时，适才看见的一个已经着色*放大了。本来苍白的脸色*现在红得像生牛肉，两眼里新织满红丝，肚子肥凸得像青蛙在鼓气，法国人在国际上的绰号是“虾蟆”，真正名副其实，可惊的是添了一团凶横的兽相。上海这地方比得上希腊神话里的魔女岛，好好一个人来了就会变成畜生。至于那安南巡捕更可笑了。东方民族没有像安南人地样形状委琐不配穿制服的。日本人只是腿太短，不宜挂指挥刀。安南人鸠形鹄面，皮焦齿黑，天生的鸦片鬼相，手里的警棍，更像一支鸦片槍。鸿渐这些思想，安南巡仿佛全猜到，他拦住落后的凤仪那辆车子，报复地搜检个不了。他把饼干匣子，肉松罐头全划破了，还偷偷伸手要了三块钱，终算铺盖袋保持完整。鸿渐管着大小两个箱子，路上不便回头，到码头下车，找不见凤仪，倒发了好一会的急。</p>
                  </div>
                </div>
                <div id="Wintab2" class="tab-pane fade"></div>
                <div id="Wintab3" class="tab-pane fade"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
      </div>

    </div>
  </div>
</div>
<!--产品信息 弹窗-->

<!--审核 弹窗-->
<app-indexing-audit #audit [internalParam]='internalTablesParam' (onSubmit)="getIndexingDetails()"></app-indexing-audit>
<!--审核 弹窗-->

<!--参考标引 弹窗-->
<app-reference-indexing #appReference [internalParam]='internalTablesParam' [idxRefTaskThemeTableList]='idxRefTaskThemeTableList'></app-reference-indexing>
<!--参考标引 弹窗-->

<!--历史标引版本   弹窗-->
<app-internal-indexed-modal-table-version #versionTable></app-internal-indexed-modal-table-version>
<app-internal-indexed-modal-add-version [internalParam]='internalTablesParam'></app-internal-indexed-modal-add-version>

<!--查看主题词-->
<app-view-keyword #appView [internalParam]='internalTablesParam'></app-view-keyword>
<!--查看主题词-->

<!--新增主题词-->
<app-add-keyword #appAdd [internalParam]='internalTablesParam'></app-add-keyword>
<!--新增主题词-->

<!--关联主题词-->
<app-internal-indexed-modal-reltheme [internalParam]="internalTablesParam" #relThemeDetail></app-internal-indexed-modal-reltheme>
<!--关联主题词-->

<!--自动匹配-->
<app-automatic-matching [internalParam]="internalTablesParam" [internalIndexedTheme]="table.tabValAll" #appAM></app-automatic-matching>
<!--自动匹配-->

<!--完成标引提示-->
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"
  aria-labelledby="myModalLabel" aria-hidden="true" id="updateTaskProduct">
  <div class="modal-dialog delete-modal modal-sm modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title text-center">完成标引提示</h4>
      </div>
      <div class="modal-body text-center">
        <p class="delete-prompt">请确认是否完成标引提交！</p>
      </div>
      <div class="modal-footer" style="width: 100%;">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="_updateTaskProduct()">确定</button>
      </div>
    </div>
  </div>
</div>
<!--完成标引提示-->

<internal-indexed-modal-reltheme-delete></internal-indexed-modal-reltheme-delete>

<!--快速标引主题词-->
<app-internal-modal-autocomplate [internalParam]='internalTablesParam'></app-internal-modal-autocomplate>
<!--快速标引主题词-->

<!--快速标引属性-->
<app-internal-modal-date [internalParam]='internalTablesParam'></app-internal-modal-date>
<!--快速标引属性-->

<ul class='custom-menu' *ngIf="completeStatus != '1'">
  <li (click)="_rightSelected();">标引主题词</li>
  <li (click)="_rightDateSelected();">标引属性</li>
</ul>

<app-indexing-popover [internalParam]='internalTablesParam'></app-indexing-popover>

<!-- 左侧删除时间属性 -->
<app-internal-indexed-attr-time-delete></app-internal-indexed-attr-time-delete>
<!-- 左侧删除时间属性 -->